import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';

import levelOne from '../../../../assets/imgs/test/levelOne.png'
import levelTwo from '../../../../assets/imgs/test/levelTwo.png'
import levelThree from '../../../../assets/imgs/test/levelThree.png'
import {IErrorType} from "../../../../type/firstType";
import ModalText from '../../../../components/ModalText'


interface IProps {
    borderBottom: string
    borderTop: string
    error: IErrorType[]
}
// 时间戳转换为YDM格式输出
function timestampToTime(timestamp) {
    if(!timestamp){
        return ''
    }
    var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
    var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
    //var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
    //var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
    //var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
    return Y+M+D
    //return Y+M+D+h+m+s;
}
// 数字转百分比
function convert(num){
    if(!num){
        return '运行正常'
    }
    let cache = Math.round((num + Number.EPSILON) * 100) / 100 + '%';
    return cache
}
@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public static defaultProps = {
        error: []
    }


    public render() {
        const {borderBottom,borderTop,error} = this.props
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    <span className={styles.spanWidth}><ModalText text='机器编号' long={15} /></span>
                    <span className={styles.spanWidth} ><ModalText text='医院名称' long={22} /></span>
                    <span className={styles.spanWidth} title="日志更新时间"><ModalText text='日志更新时间' long={4} /></span>
                    <span className={styles.spanWidth} title="Tx&MVCT程序错误率"><ModalText text='Tx&MVCT程序错误率' long={4} /></span>
                    <span className={styles.spanWidth}><ModalText text='常见错误' long={4} /></span>
                </div>
                <div className={styles.swiperC}>
                    {
                        error.length >0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={4} slidesToScroll={4} autoplaySpeed={30000}>
                            {
                                error.map((item,index) => {
                                    return(
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list} key={`itemRO_${index}`}>
                                            <img src={index === 0 ? levelOne : index === 1 ? levelTwo : index === 2 ? levelThree : null}
                                                 style={{opacity: [0,1,2].indexOf(index) === -1 ? 0 : 1}}
                                                 className={styles.error} />
                                            <span className={styles.spanWidth}><ModalText text={item.MachineId} long={15} /></span>
                                            <span className={styles.spanWidth} title={item.location}><ModalText text={item.location} long={15} /></span>
                                            <span className={styles.spanWidth}>{timestampToTime(item.uploadDate)}</span>
                                            <span className={styles.spanWidth}>{convert(item.rate)}</span>
                                            <span className={styles.spanWidth} title={item.error}><ModalText text={item.error} long={15} /></span>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
